<template>
	<view class="body p30">
		<view class="bg-white p20 br32 section">
			<view class="item mb40">
				<view class="name mb15 f30">姓名</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					v-model="name"
					placeholder="请输入姓名" />
			</view>
			<view class="item mb40">
				<view class="name mb15 f30">手机号</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					type="number"
					:maxlength="11"
					v-model="phone"
					placeholder="请输入手机号" />
			</view>
			<view class="item mb40">
				<view class="name mb15 f30">性别</view>
				<picker
					class="ww100 pl30 pr30 f30 br24"
					mode="selector"
					:value="gIndex"
					:range="gender"
					@change="setGander">
					<view class="d-b-c ww100 gender">
						<view class="">{{ gender[gIndex] }}</view>
						<u-icon name="arrow-down"></u-icon>
					</view>
				</picker>
			</view>
			<view class="item mb40">
				<view class="name mb15 f30">家庭住址</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					type="text"
					v-model="address"
					placeholder="请输入家庭住址" />
			</view>
			<view class="item mb40">
				<view class="name mb15 f30">员工证后四位</view>
				<input
					class="ww100 pl30 pr30 f30 br24"
					type="text"
					:maxlength="4"
					v-model="staffCard"
					placeholder="请输入员工证后四位" />
			</view>
			<view class="form-actions d-b-c mt50">
				<!-- <view class="pt30 pb30 pl40 pr40 br50 btn-secondary mr40 flex-1 tc fb f32" @click="back">取消</view> -->
				<view
					class="white pt30 pb30 pl40 pr40 br50 btn-primary flex-1 tc fb f32"
					@click="save()">
					保存修改
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: 0,
			name: "",
			phone: "",
			address: "",
			staffCard: "",
			gender: ["男", "女"],
			gIndex: 0,
		};
	},
	onLoad() {
		let user = uni.getStorageSync("user");
		if (user) {
			this.name = user.name;
			this.phone = user.phone;
			if (user.id) this.id = user.id;
			this.address = user.address;
			this.staffCard = user.staffCard;
			this.gIndex = user.gender = "男" ? 0 : 1;
		}
	},
	methods: {
		setGander(e) {
			this.gIndex = e.detail.value;
		},
		checkChinese(value) {
			// 正则表达式，匹配非中文字符
			const regex = /[^\u4e00-\u9fa5]/g;
			return regex.test(value);
		},
		async save() {
			if (this.name == "") return this.$showToast("请输入名称");
			// if (this.checkChinese(this.name))	return this.$showToast("请填写中文");
			if (this.phone == "") return this.$showToast("请输入手机号");
			if (!uni.$u.test.mobile(this.phone)) return this.$showToast("请输入正确手机号");
			if (this.address == "") return this.$showToast("请输入家庭住址");
			if (this.staffCard == "")
				return this.$showToast("请输入员工证后四位");
			if (this.id) {
				await this.$request({
					url: this.$api.parentXcx,
					method: "PUT",
					data: {
						id: this.id,
						name: this.name,
						gender: this.gender[this.gIndex],
						phone: this.phone,
						address: this.address,
						staffCard: this.staffCard,
						wechatId: uni.getStorageSync("openid"),
					},
				});
				this.$showToast("修改成功");
				// setTimeout(() => this.back(), 1000);
			} else {
				const res = await this.$request({
					url: this.$api.parentAdd,
					method: "POST",
					data: {
						name: this.name,
						gender: this.gender[this.gIndex],
						phone: this.phone,
						address: this.address,
						staffCard: this.staffCard,
						wechatId: uni.getStorageSync("openid"),
					},
				});
				this.$showToast(res.msg);
				// setTimeout(() => this.back(), 1000);
			}
			this.getUser();
		},
		async getUser() {
			const res = await this.$request({
				url: this.$api.login,
				data: {
					openid: uni.getStorageSync("openid"),
				},
			});
			if (res.code == 0) {
				uni.setStorageSync("user", res.data);
				this.back();
			}
			//  else if (res.code == 1) {
			// 	this.jump('/pages/setting/eidt');
			// }
		},
	},
};
</script>

<style scoped lang="scss">
.btn-secondary {
	background: #ecf0f1;
	color: #7f8c8d;
}
.btn-primary {
	background: linear-gradient(to right, #3498db, #2ecc71);
}
.btn {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.section {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.name {
	color: #2c3e50;
	font-weight: 500;
}
input,
picker {
	border: 1px solid #e0e7ff;
	transition: all 0.3s;
	background: #f8faff;
	height: 80rpx;
	.gender {
		height: 80rpx;
	}
}
</style>
